<template>
  <div id="slider">
    <div class="window" @mouseover="stop" @mouseleave="play">
      <ul class="container" :style="containerStyle">
        <li>
          <img
            :style="{ width: imgWidth + 'px' }"
            :src="sliders[sliders.length - 1].img"
            alt=""
          />
        </li>
        <li v-for="(item, index) in sliders" :key="index">
          <img :style="{ width: imgWidth + 'px' }" :src="item.img" alt="" />
        </li>
        <li>
          <img
            :style="{ width: imgWidth + 'px' }"
            :src="sliders[0].img"
            alt=""
          />
        </li>
      </ul>
      <ul class="direction">
        <!-- 左箭头 -->
        <li class="left" @click="move(1200, 1, speed)">
          <svg
            class="icon"
            width="30px"
            height="30.00px"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill="#ffffff"
              d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z"
            />
          </svg>
        </li>
        <!-- 右箭头 -->
        <li class="right" @click="move(1200, -1, speed)">
          <svg
            class="icon"
            width="30px"
            height="30.00px"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill="#ffffff"
              d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z"
            />
          </svg>
        </li>
      </ul>
      <ul class="dots">
        <li
          v-for="(dot, i) in sliders"
          :key="i"
          :class="{ dotted: i === currentIndex - 1 }"
          @click="jump(i + 1)"
        ></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "slider",
  props: {
    initialSpeed: {
      type: Number,
      default: 30,
    },
    initialInterval: {
      type: Number,
      default: 3,
    },
  },
  data() {
    return {
      sliders: [
        {
          img: "https://sp-webfront-cn.oss-cn-hangzhou.aliyuncs.com/skypixel/v2/public/website/assets/1643368448335-aac2acba2a12fb4caebf88847f06d2e2.jpg",
        },
        {
          img: "https://sp-webfront-cn.oss-cn-hangzhou.aliyuncs.com/skypixel/v2/public/website/assets/1640064592716-99cb9c11d6a37108fd2f617a9bbd8977.jpg",
        },
        {
          img: "https://sp-webfront-cn.oss-cn-hangzhou.aliyuncs.com/skypixel/v2/public/website/assets/1645755456634-4344dcc88f09a587f85b7285c877fdcc.jpg",
        },
        {
          img: "https://sp-webfront-cn.oss-cn-hangzhou.aliyuncs.com/skypixel/v2/public/website/assets/1644459115163-808d825983bc240e00ac222f98637ba2.jpg",
        },
        {
          img: "https://sp-webfront-cn.oss-cn-hangzhou.aliyuncs.com/skypixel/v2/public/website/assets/1636039865649-b0512f3a5ed8357455dd3ff0ff12079a.jpg",
        },
        {
          img: "https://sp-webfront-cn.oss-cn-hangzhou.aliyuncs.com/skypixel/v2/public/website/assets/1635330067205-7adfd0af5cc091a43857ee4c4205e792.jpg",
        },
        {
          img: "https://sp-webfront-cn.oss-cn-hangzhou.aliyuncs.com/skypixel/v2/public/website/assets/1634797952996-e8c565e6bdf95bb27618a26e0839a833.jpg",
        },
      ],
      imgWidth: 1200,
      currentIndex: 1,
      distance: -1200,
      transitionEnd: true,
      speed: this.initialSpeed,
    };
  },
  computed: {
    containerStyle() {
      return {
        transform: `translate3d(${this.distance}px, 0, 0)`,
      };
    },
    interval() {
      return this.initialInterval * 1000;
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.play();
      window.onblur = function () {
        this.stop();
      }.bind(this);
      window.onfocus = function () {
        this.play();
      }.bind(this);
    },
    move(offset, direction, speed) {
      // console.log(speed)
      if (!this.transitionEnd) return;
      this.transitionEnd = false;
      direction === -1
        ? (this.currentIndex += offset / 1200)
        : (this.currentIndex -= offset / 1200);
      if (this.currentIndex > 7) this.currentIndex = 1;
      if (this.currentIndex < 1) this.currentIndex = 7;

      const destination = this.distance + offset * direction;
      this.animate(destination, direction, speed);
    },
    animate(des, direc, speed) {
      if (this.temp) {
        window.clearInterval(this.temp);
        this.temp = null;
      }
      this.temp = window.setInterval(() => {
        if (
          (direc === -1 && des < this.distance) ||
          (direc === 1 && des > this.distance)
        ) {
          this.distance += speed * direc;
        } else {
          this.transitionEnd = true;
          window.clearInterval(this.temp);
          this.distance = des;
          if (des < -8400) this.distance = -1200;
          if (des > -1200) this.distance = -8400;
        }
      }, 20);
    },
    jump(index) {
      const direction = index - this.currentIndex >= 0 ? -1 : 1;
      const offset = Math.abs(index - this.currentIndex) * 1200;
      const jumpSpeed =
        Math.abs(index - this.currentIndex) === 0
          ? this.speed
          : Math.abs(index - this.currentIndex) * this.speed;
      this.move(offset, direction, jumpSpeed);
    },
    play() {
      if (this.timer) {
        window.clearInterval(this.timer);
        this.timer = null;
      }
      this.timer = window.setInterval(() => {
        this.move(1200, -1, this.speed);
      }, this.interval);
    },
    stop() {
      window.clearInterval(this.timer);
      this.timer = null;
    },
    // 定时器
    // animate(obj, target) {
    //     clearInterval(obj.timer);
    //     var speed = obj.offsetLeft < target ? 15 : -15;
    //     obj.timer = setInterval(function () {
    //         var result = target - obj.offsetLeft;
    //         obj.style.left = obj.offsetLeft + speed + "px";
    //         if (Math.abs(result) <= 15) {
    //             obj.style.left = target + "px";
    //             clearInterval(obj.timer);
    //         }
    //     }, 10);
    // }
  },
};
</script>
<style scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
ol,
ul {
  list-style: none;
}
#slider {
  text-align: center;
  margin: 30px 0;
}
.window {
  position: relative;
  width: 1200px;
  height: 320px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 4px;
  overflow: hidden;
}
.container {
  display: flex;
  position: absolute;
}
.left,
.right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  cursor: pointer;
}
.left {
  left: 3%;
  padding-left: 12px;
  padding-top: 10px;
}
.right {
  right: 3%;
  padding-right: 12px;
  padding-top: 10px;
}
img {
  user-select: none;
}
.dots {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.dots li {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 3px;
  border: 1px solid white;
  border-radius: 50%;
  background-color: #333;
  cursor: pointer;
}
.dots .dotted {
  background-color: orange;
}
</style>
